<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>中国公路建设行业协会科学技术奖申报管理系统</title>
@include('common-css')
<style>
a {
    text-decoration: none;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background: url(/images/bg-buildings.jpg) bottom center no-repeat;
}

.content {
    width: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    height: 100%;
}

h1 {
    margin-top: 80px;
    color: #10479e;
    font-family: serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

h2 {
    margin-top: 20px;
    color: #10479e;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.browser-requirement {
    color: #888;
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
}

.browser-requirement a {
    color: #888;
}

.login_box {
    width: 380px;
    background: #fff;
    box-sizing: border-box;
    margin: 50px auto 0;
    border-radius: 5px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.login_title {
    width: 100%;
    text-align: center;
    line-height: 60px;
    height: 60px;
    font-size: 22px;
    font-weight: 600;
    color: #555;
}

.login_input_container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
}

.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.input_box > input {
    width: 100%;
    height: 100%;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 6px 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset;
    transition: all ease-in-out 0.15s;
}

.input_box.special {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input_box.special > input {
    width: 50%;
}

.input_box.special > img {
    width: 35%;
    height: 100%;
    cursor: pointer;
    display: block;
}

.input_box > input:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
    0 0 8px rgba(102, 175, 233, .6);
}

.btn_box button {
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
}

.label_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
}

.label_box .label {
    color: #1890ff;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.label_box .label:hover {
    color: #4a90e2;
}

.input_box > .captcha {
    width: 210px;
}

.captcha_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
</head>
<body>

<div class="content">

    <h1>中国公路建设行业协会科学技术奖申报管理系统</h1>
    <h2>奖励委委员评审入口</h2>
    <div class="login_box" id="app"></div>

    @include('footer')

</div>

</body>
</html>

<script id="appTemplate" type="x-template">

<div class="login_box" v-cloak>
    <div class="login_title">奖励委委员登录</div>
    <div class="login_input_container">
        <div class="input_box">
            <a-input type="text" placeholder="用户名" size="large" v-model="inputInfo.username" ref="usernameInput">
                <a-icon slot="prefix" type="user"/>
            </a-input>
        </div>
        <div class="input_box">
            <a-input type="password" placeholder="密码" size="large" maxlength="16" v-model="inputInfo.password"
                     @keyup.enter="submitLogin">
                <a-icon slot="prefix" type="lock"/>
            </a-input>
        </div>
        <div class="input_box captcha_box" v-if="countOfLoginError >=3">
            <a-input class="captcha" type="text" placeholder="验证码" size="large" maxlength="4"
                     v-model="inputInfo.code"
                     @keyup.enter="submitLogin">
                <a-icon slot="prefix" type="code"/>
            </a-input>
            <img class="img-captcha" :src="'{{URL(captcha_src())}}'+'&now_time='+random" @click="refreshCode"
                 alt="点击刷新">
        </div>
        <div class="btn_box">
            <a-button type="primary" @click="submitLogin" :disabled="isSending">登 录</a-button>
        </div>
        <div class="label_box">
            <a href="/">返回上一页</a>
        </div>
    </div>

</div>


</script>

@include('common-js')

<script>
var countOfLoginError = 0;
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        countOfLoginError,
        random: Math.random() * 1000,
        isSending: false,
        inputInfo: {
            username: '',
            password: '',
            code: '',
        },
        imgSrc: '',//验证码地址
    },
    mounted() {
        this.focusUsernameInput()
    },
    methods: {
        refreshCode() {
            this.random = Math.random() * 1000
        },
        focusUsernameInput() {
            this.$refs.usernameInput.$refs.input.focus()
        },
        // 点击登录
        submitLogin() {
            if (this.isSending) {
                return
            }
            if (!this.inputInfo.username) {
                error("请填写用户名")
                return
            }
            if (!this.inputInfo.password) {
                error("请填写密码")
                return
            }
            var needCode = false
            if (this.countOfLoginError >= 3) {
                if (!this.inputInfo.code) {
                    error("请填写验证码")
                    return
                }
                needCode = true
            }
            let encryptedPassword = encrypt.encrypt(this.inputInfo.password)
            this.isSending = true
            loading('正在登录')
            axios.post("/api/auth/user-login", {
                username: this.inputInfo.username,
                password: encryptedPassword,
                code: this.inputInfo.code,
                needCode,
                role: 'committee'
            }).then(response => {
                dismiss()
                this.isSending = false
                if (response.data.ok) {
                    location = response.data.redirect_to
                } else {
                    if (response.data.count_of_login_error) {
                        this.countOfLoginError = response.data.count_of_login_error
                    }
                    error(response.data.message)
                    this.refreshCode()
                }
            })

        },
    },
})
</script>